$(function() {
    init();
    /*初始化*/
    function init() {
        getTitle();
        showProduct(0);
    };

    function tabScroll() {
        //iScroll初始化
        var myScroll = new IScroll('.wrapper', {
            scrollX: true
        });
        /* 点击li，添加active类,删除兄弟元素的active类 */
        $('.tab').on("click", "li", function() {
            /* console.log('ok'); */
            $(this).addClass('active').siblings().removeClass('active');
            // 让被点击的li标签往左滚动
            /* 
                利用iScroll中的方法scrollToElement(el, time, offsetX, offsetY, easing)
                在这个方法中只有一个强制的参数就是el。传递一个元素或者一个选择器，iScroll将尝试滚动到这个元素的左上角位置。
            */
            myScroll.scrollToElement(this, 500);
        });
    };

    //获取tab标题数据
    function getTitle() {
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getbaicaijiatitle",
            dataType: "json",
            success: function(res) {
                /* console.log(res); */
                var html = template("tab-title", res);
                $('.tab').html(html);
                tabScroll();
            }
        });
    };
    //渲染页面（默认值），获取tab产品内容数据
    function showProduct(titleid) {
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getbaicaijiaproduct",
            data: { titleid: titleid },
            dataType: "json",
            success: function(res) {
                /* console.log(res); */
                var html = template("tab-main", res);
                $('.products').html(html);
            }
        });
    }
    //点击tab标签，通过titleid获取对应的产品内容数据
    $('.tab').on("click", "li", function() {
        let titleid = $(this).attr("data-titleId");
        /* console.log(titleid); */
        showProduct(titleid);
    });

    //点击返回顶部
    $(".toTop").on("click", function() {
        $("body,html").animate({ scrollTop: 0 }, 500);
    })
})